<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <script src = "js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="../css/style.css">
</head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            height: 10vh;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 25px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: #111;
        }
        .column{
            float: left;
        }
        .column.left{
            width: 80%
        }

        #log{
            padding-top: 15%;
            background-color: darkred;
            padding-bottom: 27%;
            margin-left: 14%;
            width: 14%;
            padding-left: 3%;
        }
        input{
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 14px 14px;
            font-size: 14px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        /*
        需求：当用户名的输入框光标失去，发送ajax请求查询后台，判断用户是否已经存在，最后提示
        * */
        $(function (){
            //1.给用户名的输入框派发click事件
            $("#ulog").click(function () {
                //2.获取用户输入的用户名
                var username = $("#uid").val()
                var password = $("#upsd").val()
                //3.发送ajax，传递用户参数
                //格式：$.post(url,param, function(data){},"text/json")
                // $.post("/studentSystem/LoggingCheckServlet", "username=" + username, "password": password);
                $.post("/studentSystem/loggingServlet", {"username":username,"password":password}, function (data){
                    //4. 判断pass 如果为true，用户成功登录，msg设置为绿色，放到span中
                    console.log(data.pass)
                    if(data.pass){
                        //成功登录
                        $("input").css("display","none")
                        $("#uid_msg").css("color", "white").css("font-size", "30px").html(data.msg);
                    }else{
                        //登录失败
                        $("#uid_msg").css("color","white").html(data.msg);
                    }
                }, "json");
            })

        })

    </script>

<nav><ul><li><a href="index.jsp">学生信息管理系统</a></li>
    <li><a href="studentInfo.html">信息查看</a></li>
    <li> <a href="loggingCheck.html">登录</a></li>
    <li> <a href="enroll.html">添加</a></li>
</ul>
</nav>
<body background-color="darkred">
<div class="column"><img src="pic/usc.jpg" width="120%"></div>
<div class="column" id="log"><input type="text" name="username" id="uid" placeholder="请输入用户名"/>
<br/>
<input type="password" name="password" id="upsd" placeholder="请输入密码"/>
<br/>
<input type="submit"  id="ulog" value="登录">
<div id="uid_msg"></div></div>


</body>
</html>